<template>
	<view>
		
		<view class="" v-if="iskt">
			<view class="top" :style="{marginTop:height}">
				查学校
				<image src="/static/cxx/Group_2073.png" class="top__bg" mode=""></image>
			</view>
			<view class="sousuo">
				<u-search placeholder="请输入学校名称" height='60rpx' bgColor='#fff' placeholderColor='#C6C6C6' v-model="keyword"
					@custom='custom'></u-search>
			</view>
			<view class="con">
				<view class="box"
					:style="{height:'calc(100vh - 80rpx - 90rpx - 95.42rpx - 60rpx - 16rpx - '+height+' - '+bheight+')'}">
					<view class="u-flex u-flex-y-center box__tab">
						<view class="u-flex u-flex-y-center" v-for="(item,index) in tablist" :key="index"
							@click="clicktab(index)">
							<view class="box__sx" :class="curtab==index?'active':''">
								{{item.name}}
							</view>
							<image class="box__sx__icon" :src="'/static/cxx/Polygon_'+(curtab==index?'6':'5')+'.png'"
								mode=""></image>
						</view>
					</view>
					<scroll-view scroll-y="true" style="height: calc(100% - 90rpx);" v-if="list.length>0" @scrolltolower='scrolltolower'>
						<view class="list">
							<schoolitem :item='item' v-for="(item,index) in list" :key="index"></schoolitem>
							<u-loadmore :status="status" />
						</view>
						
					</scroll-view>
					<u-empty v-else>
					</u-empty>
				</view>
			</view>
			<image src="/static/cxx/Group 2238.png" @click="navto('/pages/cschool/collect')" class="sc" mode=""></image>
			<image src="/static/cxx/Group 2235.png" class="fx" mode=""></image>
		</view>
		<view class="" style="background-color: #f3f4f6;display: flex;align-items: center;justify-content: center;"
			:style="{height:'calc(100vh - 95.42rpx)'}" v-else>
			<u-empty mode='history' text='当前选择区域暂未开通,可联系客服开放'>
				<!-- <u-button type="primary"></u-button> -->
			</u-empty>
		</view>
		
		
		<tabbar :current="2"></tabbar>
		<!-- 城市选择弹框 -->
		<u-picker :show="show" @cancel='show=false'  ref="uPicker" keyName='title' @confirm='confirm' :loading="loading" :columns="columns" @change="changeHandler" @on></u-picker>
	</view>
</template>

<script>
	import school from '@/api/_school.js'
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				keyword: '',
				tablist: [{
						name: '全部'
					},
					{
						name: '省市'
					},
				],
				page: 1,
				page_size: 10,
				curtab: 0,
				list: [],
				show: false,
				loading: false,
				columns: [],
				columnData: [],
				province_id:'',
				city_id:'',
				status: 'loadmore',
				total:0,
				iskt:false
			};
		},
		computed: {
			height() {
				const height = `calc(${uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')})`
				return uni.$u.deepMerge(height)
			},
			bheight() {
				const height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				return uni.$u.deepMerge(height)
			},
		},
		methods: {
			confirm(e){
				if(e.value[1]){
					if(e.value[0].title==e.value[1].title){
						this.tablist[1].name=e.value[0].title
					}else{
						this.tablist[1].name=e.value[0].title+e.value[1].title
					}
				}else{
					this.tablist[1].name=e.value[0].title
				}
				this.list=[]
				this.page=1
				this.curtab = 1
				this.province_id = e.value[0].id
				this.city_id = e.value[1]?e.value[1].id:''
				this.getlist()
				this.show=false
			},
			scrolltolower() {
				if (this.list.length == this.total) {
					return
				}
				this.status = 'loading';
				this.page++
				this.getlist()
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					this.loading = true
					// 模拟网络请求
					home.arealist({page:1,page_size:50,pid:e.value[0].id}).then(res=>{
						if(res.data.code==200){
							picker.setColumnValues(1, res.data.data.data)
							this.loading = false
						}
						
					})
				}
			},
			custom() {
				this.page=1
				this.list=[]
				this.getlist()
			},
			clicktab(index) {
				
				if (index == 0) {
					this.page=1
					this.curtab = 0
					this.keyword = ''
					this.province_id = ''
					this.city_id = ''
					this.list=[]
					this.getlist()

				} else {
					this.show = true

				}
				
			},
			async getlist() {
				let res = await school.schoollist({
					page: this.page,
					page_size: this.page_size,
					title: this.keyword,
					province_id: this.province_id,
					city_id: this.city_id
				})
				if (res.data.code == 200) {
					this.list = [...this.list, ...res.data.data.data]
					this.total = res.data.data.pageInfo.total
					if (this.list.length == this.total) this.status = 'nomore';
				}
			},
			async getaddr(){
				// let picker = this.$refs.uPicker
				let res = await home.arealist({page:1,page_size:34,pid:0})
				if(res.data.code==200){
					this.$set(this.columns,0,res.data.data.data)
					home.arealist({page:1,page_size:50,pid:res.data.data.data[0].id}).then(res1=>{
						this.$set(this.columns,1,res1.data.data.data)
					})
				}
			},
			
		},
		onLoad() {
			this.getlist()
			this.getaddr()
		},
		onShow() {
			this.iskt=uni.getStorageSync('schoolkt')
			
			
		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_3122.png') 100% no-repeat;
		background-position: top;
		width: 750rpx;
	}

	.top {
		padding: 40rpx 0 90rpx 64rpx;
		font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
		font-weight: bold;
		font-size: 46rpx;
		color: #000000;
		line-height: 40rpx;
		position: relative;

		&__bg {
			width: 192.75rpx;
			height: 196.18rpx;
			position: absolute;
			top: 0;
			right: 118rpx;
		}
	}

	.sousuo {
		padding: 0 40rpx;
		position: relative;
		margin-bottom: 10rpx;

		/deep/.u-search__action {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #747474;
			line-height: 40rpx;
		}
	}

	.box {
		background: #F1F8FC;
		border-radius: 57rpx 57rpx 0rpx 0rpx;

		&__tab {
			height: 90rpx;
			padding: 0 55rpx;
		}

		&__sx {
			padding: 0 20rpx;
			height: 34rpx;
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			border: 2rpx solid #93B8F9;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #93B8F9;
			line-height: 40rpx;

			&__icon {
				margin-right: 35rpx;
				width: 21.3rpx;
				height: 17.55rpx;
				margin-left: 5rpx;
			}
		}

		.active {
			height: 38rpx;
			background: #84b1ff;
			color: #fff;
		}
	}

	.con {
		padding: 0 24rpx;
	}

	.list {
		padding: 0 22rpx 30rpx;
	}

	.sc {
		width: 92rpx;
		height: 92rpx;
		background: #3EB8FF;
		border-radius: 50%;
		position: fixed;
		bottom: 300rpx;
		right: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 16rpx;
		color: #FFFFFF;

		&__icon {
			width: 32rpx;
			height: 29rpx;
		}
	}

	.fx {
		width: 92rpx;
		height: 92rpx;
		background: #3EB8FF;
		border-radius: 50%;
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 16rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;

		&__icon {
			width: 34rpx;
			height: 27rpx;
			margin-bottom: 6rpx;
		}
	}

	.popbox {
		width: 700rpx;
		background: linear-gradient(180deg, #F3F9FF 0%, #D9EDFF 100%);
		margin-left: 25rpx;
		border-radius: 57rpx 57rpx 0 0;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(102, 141, 133, 0.25);

		&__title {
			text-align: center;
			padding: 55rpx 0 62rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			line-height: 40rpx;
		}

		&__title1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 31rpx;
			color: #000000;
			line-height: 40rpx;
			padding-left: 62rpx;
			margin-bottom: 32rpx;
		}

		&__item {
			padding: 0 42rpx;
			height: 69rpx;
			background: #FFFCFC;
			border-radius: 23rpx 23rpx 23rpx 23rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
			line-height: 68rpx;
			margin-bottom: 13rpx;
			width: fit-content;
			margin-left: 40rpx;
		}

		&__list {
			padding: 0 62rpx 0 26rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}

		.active {
			background: #8DB2FF;
			color: #fff;
		}
	}
</style>